<template>
  <div id="app">
    <!-- 标题栏 -->

    <div class="title-bar">
      <div class="back-arrow">
        <svg 
        t="1747792003449" 
        class="icon" 
        viewBox="0 0 1024 1024" 
        version="1.1" 
        xmlns="http://www.w3.org/2000/svg" 
        width="25.5" 
        height="25.5"
        @click="goBack"
      >
        <path d="M658.24 210.304H292.544V64L0 283.456l292.544 219.456V356.544H658.24c124.352 0 219.52 95.04 219.52 219.456s-95.104 219.456-219.52 219.456H292.544V941.76H658.24C855.744 941.76 1024 780.8 1024 576S863.104 210.304 658.24 210.304z" 
        fill="#2c2c2c"
      ></path>
      </svg>
      </div>
      <h2>积分规则</h2>
    </div>
    <!-- 积分规则内容 -->
    <div class="content">
      <div class="rule-text">
        <p>进餐打卡、浏览营养教育、后台留言等均可获得相应积分，积分可以兑换微信红包，100 积分=1 元。工作人员会定期联系您兑换红包或等值礼品。</p>
        <p>1. 每次有效饮食打卡可获得10积分。</p>
        <p>2. 浏览营养教育：同一条营养教育信息，第一次浏览5分钟以上可获得5积分；第二次浏览3分钟以上可获得3积分；第三次及以上可获得2积分（不限时）。</p>
        <p>3. 每提交有效留言1条可获得10积分（限100积分以内）。</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PointsRules',
  setup() {
    // 返回按钮点击事件
    const goBack = () => {
      window.history.back();
    };
    
    return {
      goBack
    };
  }
};
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  color: #2c3e50;
  padding: 0;
  margin: 0;
  background-color: white;
}

/* 标题栏样式 */
.header {
  background-color: #ffcc00;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.back-button {
  display: flex;
  align-items: center;
  color: #333;
  cursor: pointer;
}

.arrow {
  font-size: 20px;
  margin-right: 5px;
}

.back-text {
  font-size: 16px;
}

.header h1 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

/* 内容区域样式 */
.content {
  padding: 15px;
}

/* 规则文本样式 */
.rule-text {
  line-height: 1.8;
  color: #555;
}

.rule-text p {
  margin-bottom: 15px;
  text-align: justify;
}

.title-bar {
  display: flex;
  align-items: center;
  padding: 15px;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
}

.back-arrow {
  margin-right: 10px;
}

</style>
